import {useSelector} from "react-redux";
import {RootState} from "@/redux/store.ts";
import {useState} from "react";
import {ColumnProps} from "@douyinfe/semi-ui/lib/es/table";
import {Table} from "@douyinfe/semi-ui";


const TableShow = () => {

    const {sourceData} = useSelector((state: RootState) => state.datasource)

    const [tableHeight, setTableHeight] = useState(100)

    const [tableWidth, setTableWidth] = useState(100)

    const onHeaderCell = () => ({
        style: {
            backgroundColor: "transparent",
        },
    });

    const handleRow = (_: any, index: any) => {
        // 给偶数行设置斑马纹
        if (index % 2 === 1) {
            return {
                style: {
                    background: 'transparent',
                },
            };
        } else {
            return {};
        }
    };

    const columns: ColumnProps[] = sourceData?.length ? Object.keys(sourceData[0]).map(field => ({
        dataIndex: field,
        title: field,
        key: field,
        align: 'center',
        ellipsis: true,
        onHeaderCell
    })) : []

    return <div
        style={{width: '100%', height: '100%'}}
        ref={ref => {
            setTableWidth(ref?.clientWidth || 100)
            setTableHeight(ref?.clientHeight || 100)
        }}
    >
        <Table
            onRow={handleRow}
            scroll={{y: tableHeight - 42, x: tableWidth - 5}}
            columns={columns}
            dataSource={sourceData}
            pagination={false}
        />
    </div>

}


export default TableShow